<template>
    <el-row id="myRow1">
        <p id="myP1_left">
            <el-icon><Fold /></el-icon>
            <span style="color: #000;">用户管理</span>
            <span>/</span>
            <span>用户</span>
        </p>
        <p></p>
    </el-row>
    <el-row id="myRow2">
        <div style="height: 2em;width: 5.5em;background-color: #46BA85;font-size: 12px;display: flex;justify-content: center;align-items: center;color: white;gap: 2px;">
            <div style="width: 0.8em;height: 0.8em;border-radius: 0.4em;background-color: white;"></div>
            <div>用户</div>
            <el-icon><CloseBold /></el-icon>
        </div>
    </el-row>
    <el-form :inline="true" :model="myForm" id="myForm">
        <el-form-item>
            <el-select placeholder="请选择公司" v-model="myForm.organization">
                <el-option value="1">1</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-input placeholder="请输入姓名或手机号" v-model="myForm.keyword"></el-input>
        </el-form-item>
        <!-- <el-form-item>
            <el-select placeholder="请选择角色" v-model="myForm.juese">
                <el-option value="1">1</el-option>
            </el-select>
        </el-form-item> -->
        <el-form-item>
            <el-select placeholder="请选择状态" v-model="myForm.status">
                <el-option :value="1">1</el-option>
                <el-option :value="0">0</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <div class="demo-date-picker">
                <div class="block">
                <el-date-picker
                    v-model="myDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
                </div>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-row id="myRow3">
        <el-button type="info" style="margin-bottom: 1em;"><el-icon><Refresh /></el-icon>刷新</el-button>
    </el-row>
    <el-table style="width: 100%;" border :data="tableData" @row-click="save">
        <el-table-column label="昵称" prop="nickname"></el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="投递总量/kg" prop="deliveryTotal"></el-table-column>
        <el-table-column label="积分总额" prop="pointsTotal"></el-table-column>
        <el-table-column label="最近活跃时间" prop="lastActiveTime"></el-table-column>
        <el-table-column label="注册时间" prop="registerTime"></el-table-column>
        <el-table-column label="来源" prop="organization"></el-table-column>
        <el-table-column label="状态" prop="status"></el-table-column>
        <el-table-column label="邀请人" prop="Inviter">
            <template #default>
                -
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scoped"><el-button type="primary" @click="dialogEdit = true">编辑</el-button></template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogEdit">
        <el-row style="font-size: 20px;position: relative;bottom: 1em;width: 10em;">编辑用户</el-row>
        <el-form :model="myForms" label-width="auto" style="padding-left: 5em;">
            <el-form-item label="组织机构" required class="myFormItem1">
                <el-select v-model="myForms.organization" disabled>
                    <el-option :value="myForms.organization" checked>{{ myForms.organization }}</el-option>
                </el-select>
            </el-form-item>
            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="昵称" required class="myFormItem2">
                        <el-input v-model="myForms.nickname" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号" required class="myFormItem2">
                        <el-input :value="myForms.phone" disabled>{{ myForms.phone }}</el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="邀请人" class="myFormItem1">
                <el-select v-model="myForms.inviter_id" disabled>
                    <el-option :value="myForms.inviter_id" checked>{{ myForms.inviter_id }}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" class="myFormItem1">
                <el-select v-model="myForms.status">
                    <el-option value="正常">正常</el-option>
                    <el-option value="禁用">禁用</el-option>
                </el-select>
            </el-form-item>
            <el-form-item  label="是否是安装人员">
                <el-radio-group v-model="myForms.isInstaller">
                    <el-radio value="是">是</el-radio>
                    <el-radio value="否">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否是清运人员">
                <el-radio-group v-model="myForms.isCollector">
                    <el-radio value="是">是</el-radio>
                    <el-radio value="否">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" style="margin-bottom: 3em;">
                <el-input type="textarea" v-model="myForms.remark"></el-input>
            </el-form-item>
            <el-row style="justify-content: flex-end">
                <el-button @click="dialogEdit = false">取消</el-button>
                <el-button type="primary" @click="editUser">确定</el-button>
            </el-row>
        </el-form>
    </el-dialog>
    <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="myForm.pageIndex"
        :page-sizes="[1,2,3,4,5,6,7,8,9]"
        :page-size="myForm.pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        class="pagination"
        background
        style="margin-top: 3em;"  
    />
</template>
<script setup>
    import { reactive,ref } from 'vue';
    import axios from 'axios';
    let dialogEdit = ref(false)
    let myDate = ref([])
    let tableData = ref([])
    let total = ref(0)
    let myForm = reactive({
        pageIndex:1,
        pageSize:5,
        organization:'',
        keyword:'',
        status:'',
        starttime:"",
        endtime:""
    })
    let myForms = reactive({
        id:0,
        organization:'',
        nickname:'',
        phone:'',
        inviter_id:'1',
        status:'',
        isInstaller:'否',
        isCollector:'否',
        remark:''
    })
    let search = () => {
        myForm.starttime = myDate.value[0] || ''; // 没有选择时设为空字符串，避免传undefined
        myForm.endtime = myDate.value[1] || '';
        userList();
    }
    let save = (value) => {
        console.log(value)
        myForms.organization = value.organization
        myForms.nickname = value.nickname
        myForms.phone = value.phone
        myForms.id = value.id
    }
    let userList = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/customer/customerList",myForm,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(res){
            tableData.value = res.data.dataset.customerList;
            total.value = res.data.dataset.totalSize;
        })
    }
    userList();
    let editUser = () => {
        axios.post("http://106.13.143.56:8080/garbageSys/customer/editCustomer",myForms,{
            headers:{
                'Content-Type':'application/json',
                'token':`${sessionStorage.getItem("token")}`
            }
        })
        .then(function(){
            alert("编辑成功");
            dialogEdit.value = false
        })
    }
    let handleCurrentChange=(newPage)=>{
        myForm.pageIndex= newPage;
        userList(); // 重新获取数据
    }
    let handleSizeChange=(newPage)=>{
        myForm.pageSize= newPage;
        userList(); // 重新获取数据
    }
</script>

<style scoped lang="less">
    #myRow1{
        border-bottom: 1px solid #ccc;
        padding: 0 1em;
        box-sizing: border-box;
        height: 3em;
        display: flex;
    }
    #myP1_left{
        height: 100%;
        display: flex;
        align-items: center;
        margin: 0;
        span{
            font-size: 14px;     
            margin-left: 0.7em;  
            color: #9AAABF; 
        }
    }
    #myRow2{
        height: 40px;
        align-items: center;
        padding: 0 1em;
        border-bottom: 1px solid #ccc;
    }
    #myForm{
        padding-left: 1.2em;
        padding-top: 1.3em;
        .el-form-item{
            width: 13%;
        }
        button{
            margin-left: 12em;
        }
    }
    #myRow3{
        justify-content: flex-end;
        padding: 0 1em;
    }
    .myFormItem1{
        width: 45%;
    }
    .myFormItem2{
        width: 85%;
    }
</style>